<template>
	<view>
		<!-- #ifdef APP-PLUS-->
		<u-sticky offset-top="0" zIndex="10000">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<u-sticky offset-top="-44" zIndex="10000">
			<!-- #endif -->
			<view>
				<view class="bgWhite">
          <view :style="{ height: statusHeight + 20 + 'rpx' }"></view>
					<up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" :inactiveStyle="{
	      	           fontWeight: '400',
	      	           fontSize: '30rpx',
	      	           lineHeight:'100rpx',
	      	           color: '#202020',
	      	         }" :activeStyle="{
	      	           fontWeight: '600',
	      	           fontSize: '36rpx',
	      	           lineHeight:'100rpx',
	      	           color: '#00C1B9',
	      	         }" :lineHeight="5" lineColor="#00C1B9">
					</up-tabs>
					<view class="cateBox u-flex" v-show="cateList.length>1">
						<view class="cateItem" :class="cateId==item?.transaction_id?'active':''" v-for="(item,index) in cateList" @click="onCateClick(index,item?.transaction_id)">
							<view>{{item?.service_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="pages">
			<view class="card" v-for="(item,index) in itemList" :key="index">
				<view class="u-flex">
					<image src="https://ossresource.miyingbl.com/def/c0c17202406251553104065.png" mode="" class="icon"></image>
					<view class="text">患者：</view>
					<view class="text1">{{item.nickname}}</view>
				</view>
				<view class="u-p-t-20 u-flex" v-if="item?.service_type == 1 || item?.service_type == 2">
					<image src="https://ossresource.miyingbl.com/def/877d020240625162532472.png" mode="" class="icon"></image>
					<view class="text">主诉：</view>
					<view class="text1 line1 u-flex-1">{{item.describe || '未知'}}</view>
				</view>
				<view class="u-p-t-20 u-flex">
					<image src="https://ossresource.miyingbl.com/def/6a338202406251626167896.png" mode="" class="icon"></image>
					<view class="text">服务类型：</view>
					<view class="text1">{{item.service_type_text}}</view>
				</view>
				<view class="u-p-t-20 u-p-b-20 u-flex u-border-bottom">
					<image src="https://ossresource.miyingbl.com/def/37194202406251624075828.png" mode="" class="icon"></image>
					<view class="text">问诊时间：</view>
					<view class="text1">{{item.consultation_time}}</view>
				</view>
				<view class="u-p-t-20 u-flex u-row-right">
					<view class="btns" v-if="item?.service_type == 1" @click="navigateTo('/patients/info/index?userId='+item.uid)">患者资料</view>
          <view class="btns" v-if="item?.service_type == 2" @click="navigateTo('/patients/info/manIndex?userId='+item.uid)">患者资料</view>
          <view class="btns" v-if="item?.service_type == 3" @click="navigateTo('/patients/info/pediatrics?userId='+item.uid)">患者资料</view>
					<view class="btns" v-show="item.consultation_status_sign=='afoot'" @click="toInterrogation(item)">发起问诊</view>
					<view class="btns" v-show="item.consultation_status_sign=='end'" @click="toInterrogation(item)">查看历史问诊</view>
				</view>
				<view class="rightTop" v-show="item.consultation_status_sign=='afoot'">
        </view>
        <view class="right_top_text" v-if="item.consultation_status_sign=='afoot'">
          <view class="yuan"></view>
          <view>{{ item?.consultation_status_text }}</view>
        </view>
        <view class="right_top_text" style="color:#AAAAAA" v-if="item.consultation_status_sign=='end'">
          <view>{{ item?.consultation_status_text }}</view>
        </view>
        <view class="left_bottom" v-if="item?.is_binding == 1">已绑定</view>
			</view>
			<view class="none" v-show="itemList.length==0&&!loading">
				<view>
					<image src="@/static/index/inone.png" mode="" class="none_img"></image>
					<view class="none_text">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, nextTick } from 'vue'
	import { formatDate } from '@/utils/utils'
	import { navigateTo, showToast, navigateBack, redirectTo, switchTab } from '@/utils'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onReady,
		onShow,
		onPageScroll,
		onUnload,
		onHide,
		onBackPress,
	} from '@dcloudio/uni-app'
	import { doctorBusinessTypeNews,getConsultation } from '@/api/business'
	const currentTab = ref(0)
	const loading=ref(true)
	const tablist = ref([{
			name: '全部问诊',
			id: 0
		}, {
			name: '问诊中',
			id: 1
		},
		{
			name: '往期问诊',
			id: 2
		}
	])
	const cateId = ref(0)
	const cateList = ref([{
			service_name: '全部',
			transaction_id: 0
		}
	])
	const page=ref(1)

	onLoad(() => {
		// getTypeList()
		getList()
	})
const statusHeight = ref(0)
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e.statusBarHeight * 2
    },
  })
})
	onShow(() => {
    cateList.value = [{
        service_name: '全部',
        transaction_id: 0
      }
    ]
    getTypeList()
    //getList()
		const transactionId = uni.getStorageSync('transactionId')
		if(transactionId) {
			cateId.value = transactionId
			console.log(transactionId)
      itemList.value = []
		  page.value=1

			nextTick(() => {

			})
			uni.removeStorageSync('transactionId')
		}
	})
	async function getTypeList() {
		const res = await doctorBusinessTypeNews()
		const list=res.data.list;
		cateList.value=cateList.value.concat(list)
	}
	// 切换顶部tab
	const onTabClick = (e) => {
		currentTab.value = e.index
		itemList.value = []
		page.value=1
		getList()
	}
	const onCateClick = (index, id) => {
		page.value=1
		itemList.value = []
		cateId.value = id
		getList()
	}

	const itemList = ref([])
	//问诊
	function toInterrogation(row) {
    if(row?.service_type == 3){
      navigateTo(
		   `/pregnancys/index/doctor-chat?uid=${row.uid}&avatar=${row.user_avatar}&name=${row.user_nickname}&chat_type=${row.service_type}&childId=${row?.children_user_id}`
		  )
    }else{
      navigateTo(
		   `/pregnancys/index/doctor-chat?uid=${row.uid}&avatar=${row.avatar}&name=${row.nickname}&chat_type=${row.service_type}`
		  )
    }
	}
  const lastPage = ref(0)
	async function getList() {
		loading.value=true
		uni.showLoading({
			title: '加载中'
		});

		const res=await getConsultation({
			tag_type:currentTab.value,
			service_type:cateId.value,
			page:page.value,
			limit:10
		})
		setTimeout(function () {
			loading.value=false
			uni.hideLoading();
		}, 1000);
    lastPage.value = res?.data?.last_page
		itemList.value=itemList.value.concat(res.data.data)
	}

	//上拉加载
	onReachBottom(() => {
    if(page.value < lastPage.value){
      page.value++
		  getList()
    }
	})

	  onPullDownRefresh(() => {
	    page.value=1
	    itemList.value=[]
	    getList()
	    setTimeout(() => {
	      uni.stopPullDownRefresh()
	    }, 1000)
	  })
</script>

<style>
	page {
		background: #F5F6F8;
	}
</style>
<style lang="scss" scoped>
	.bgWhite {
		background-color: #fff;
	}

	.pages {
		padding: 24rpx;
	}
	.none{
		display: flex;
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: center;
		/* 相对父元素水平居中 */
		height: 70vh;
	    .none_img {
	      width: 250rpx;
	      height: 200rpx;
	      display: block;
	      margin-top: 30vh;
	    }
	    .none_text {
	      font-family: PingFangSC, PingFang SC;
	      font-weight: 400;
	      font-size: 26rpx;
	      color: #aaaaaa;
	      line-height: 37rpx;
	      margin-top: 20rpx;
	      text-align: center;
	    }
	}
	.cateBox {
		padding: 20rpx 30rpx;
		.cateItem {
			width: 160rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			font-size: 28rpx;
			color: #AAAAAA;
			text-align: center;
			margin-right: 20rpx;
			&.active {
				background: #00C1B9;
				border-radius: 24rpx;
				color: #fff;
			}
		}
	}

	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
		margin-bottom: 20rpx;
		.icon {
			width: 26rpx;
			height: 26rpx;
			display: block;
			margin-right: 15rpx;
		}
		.text {
			font-size: 26rpx;
			color: #5C5C5C;
		}
		.text1 {
			font-size: 26rpx;
			color: #202020;
		}
		.btns {
			border-radius: 30rpx;
			border: 1rpx solid #AAAAAA;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #5C5C5C;
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-left: 10rpx;
		}
		.rightTop {
			position: absolute;
			width: 66rpx;
			height: 66rpx;
			background: linear-gradient( 225deg, #8BCA64 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 1) 100%);
			top: 0;
			right: 0;
			border-radius: 0 20rpx 0 0;
		}
    .right_top_text{
      position: absolute;
      top: 20rpx;
			right: 20rpx;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #8BCA64;
      .yuan{
        width: 14rpx;
        height: 14rpx;
        background: #8BCA64;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }
    .left_bottom{
      position: absolute;
      left:20rpx;
      bottom:34rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #AAAAAA;
    }
	}
</style>
